<template>
  <div id="app">
    <!-- {{ $route.meta.alive }} -->
    <headers v-if="$route.meta.alive">
      <div :class="[$route.meta.alive ? 'main' : '']">
        <router-view />
      </div>
    </headers>
    <div v-else :class="[$route.meta.alive ? 'main' : '']">
      <router-view />
    </div>

    


    <div   class="concatBtn" v-drag >
      <div @click="toQA" > 技术支持</div>
      <div @click="toQA">Q&A</div>
    </div>


    <!-- <div :class="[$route.meta.alive?'main':'']">
      <router-view/>
    </div> -->
    <!-- <foots  v-if="$route.meta.alive"  /> -->
  </div>
</template>
<script>
import foots from "@/components/foots.vue";
import headers from "@/components/headers.vue";
export default {
  components: { headers, foots },
  //自定义指令
  directives: {
        drag: {
          // 指令的定义
          bind: function(el) {
            let oDiv = el;  // 获取当前元素
            oDiv.onmousedown = (e) => {
              // 算出鼠标相对元素的位置
              let disX = e.clientX - oDiv.offsetLeft;
              let disY = e.clientY - oDiv.offsetTop;
              console.log("本身的宽高",oDiv.clientHeight);

              document.onmousemove = (e) => {
                // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - disX;
                let top = e.clientY - disY;

                if (left <= 0) {
                  left = 0;
                } else if (left >= document.documentElement.clientWidth - oDiv.clientWidth){
                  //document.documentElement.clientWidth 屏幕的可视宽度
                  left = document.documentElement.clientWidth - oDiv.clientWidth
                }
                if (top <= 0) {
                  top = 0;
                } else if (top >= document.documentElement.clientHeight - oDiv.clientHeight){
                  // document.documentElement.clientHeight 屏幕的可视高度
                  top = document.documentElement.clientHeight - oDiv.clientHeight

                }

                oDiv.style.left = left + 'px';
                oDiv.style.top = top + 'px';

              };

              document.onmouseup = (e) => {
                document.onmousemove = null;
                document.onmouseup = null;
              }
            }
          }
        }
      },

  data() {
    return {};
  },
  methods:{
    toQA(){
      this.$router.push({
        path:"/qa"
      })
    }
  }
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
.concatBtn{
  position: fixed;
  bottom: 90px;
  right: 50px;
  width: 90px;
  height: 90px;
  background: #323232;
  z-index: 999;
  border-radius: 50%;
  box-shadow: 0 0 25px #818181;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #fff;
  cursor: pointer;


}
body,
html {
  width: 100%;
  min-width: 1420px;
  overflow-x: auto;
  padding: 0 !important;
}
.main {
  margin-top: 200px;
}
.sameDiv {
  // margin: 0 249px 0 267px;
  // margin: 0 12% ;
  margin: 0 4% ;
}

@media screen and (max-width: 1420px) {
  .sameDiv {
    margin: 0 2%;
  }
  .headers .nav .logoBox .logo {
    margin-right: 50px !important;

  }

}
</style>
